<template>
  <div>
    <div v-if="id">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="业务平台功能授权" name="1"></el-tab-pane>
        <el-tab-pane label="管理平台功能授权" name="2"></el-tab-pane>
      </el-tabs>
      <div class="flex justify-between align-center">
        <div>请选择页面导航</div>

        <div>
          <el-button v-preventReClick v-if="authrightModel" size="mini" type="primary" @click="handledit">编辑</el-button>
          <el-button v-preventReClick v-if="!authrightModel" size="mini" type="primary"
            @click="handleSave('0')">取消</el-button>
          <el-button v-preventReClick v-if="!authrightModel" size="mini" type="primary"
            @click="handleSave('1')">保存</el-button>
        </div>
      </div>
      <div>
        <div style="margin: 10px 0">
          <el-input v-model="queryParams.orgName" @input="orgNameInput" placeholder="请输入">
            <i class="el-icon-search el-input__icon" style="cursor: pointer;" slot="suffix" @click="search"></i>
          </el-input>
        </div>
      </div>

      <!-- table -->
      <el-table :data="tableDataChange" class="margin-top" style="width: 100%" height="55vh" row-key="menuId" border
        default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">

        >
        <el-table-column prop="date" label="菜单名称" width="195" :render-header="renderPrice">
          <template v-slot="scope">
            <el-checkbox :disabled="authrightModel" v-if="scope.row.type == 2" v-model="scope.row.checked"></el-checkbox>
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作按钮">
          <template v-slot="scope">
            <el-checkbox :disabled="authrightModel" v-if="scope.row.type == 2" v-model="scope.row.hasOperateButton"
              @change="handlechange(scope.row)" :checked="scope.row.hasOperateButton === 0 ? false : true" :true-label="1"
              :false-label="0">操作</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="数据范围" align="center" width="125" fixed="right">
          <template v-slot="scope">
            <template v-if="scope.row.type == 2">
              <span>{{ roletypes[scope.row.dataScope] }}</span>
              <el-button v-preventReClick :disabled="authrightModel" size="mini" type="text"
                @click="handlerange(scope.row, scope)">数据范围</el-button>
              <!-- <el-button v-preventReClick  size="mini" type="text" @click="handlerange(scope.row,scope.$index)">数据范围</el-button> -->
            </template>
          </template>
        </el-table-column>
      </el-table>
      <DataRange ref="DataRange" @emitsubmit="emitsubmit"></DataRange>
    </div>

    <div v-else>
      <el-empty description="空空如也~"></el-empty>
    </div>
  </div>
</template>
<script>
import DataRange from "@/components/common/DataRange"
import { getRoleFunctionAuthority, getRoleDataScope } from "@/api/common/role";
export default {
  components: { DataRange },
  props: {
    authrightModel: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      tableDataChange: [],
      activeName: "1",
      queryParams: {},
      tableData: [],
      id: '',
      roletypes: [
        '个人数据',
        '所在组织',
        '所在组织及下级组织'
      ],
      index: undefined

    };
  },
  methods: {
    /**
     * 初始化id，如果没有则不展示
     */
    init(id) {
      this.id = id
      console.log(id);
      !!this.id && this.getlist(1)
    },
    renderPrice(h, { column, $index }) {
      return [
        column.label,
        h(
          'el-tooltip',
          {
            props: {
              content: '勾选菜单名称，默认对该页面有可读权限', // 鼠标悬停时要展示的文字提示
              placement: 'top' // 悬停内容展示的位置
            }
          },
          [h('span', { class: { 'el-icon-question': true } })] // 图标
        )
      ]
    },
    emitsubmit(row) {
      console.log(row, '回传---', this.roletypes);
      //this.$set()
      this.tableDataChange.forEach((element, inde) => {
        if (element.menuId == row.menuId) {
          this.$set(element, 'dataScope', row.dataScope)
          this.$set(element, 'operateType', row.operateType)
          this.$set(element, 'checked', true)
        }
      });
    },
    handleClick() {
      if (this.activeName == '1') {
        this.getlist(1)
      } else {
        this.getlist(2)
      }
    },
    search() {
      this.tableDataChange = JSON.parse(JSON.stringify(this.tableData))
      this.tableDataChange = this.tableDataChange.filter(item => item.name.includes(this.queryParams.orgName))
      console.log(this.tableDataChange)
    },
    orgNameInput(val) {
      this.tableDataChange = JSON.parse(JSON.stringify(this.tableData))
      this.tableDataChange = this.tableDataChange.filter(item => item.name.includes(val))
      console.log(this.tableDataChange)
    },
    handlechange(val) {
      console.log(val, '炒作--', this.tableData);
      // if(this.tableDataChange.length!=0){
      this.tableDataChange.forEach((element, inde) => {
        if (element.menuId == val.menuId) {
          //this.$set(element,"hasOperateButton",val.hasOperateButton === false?0:1)
          this.$set(element, "hasOperateButton", val.hasOperateButton)
          this.$set(element, 'checked', true)
        }
      });
      console.log(this.tableDataChange, 'this.tableDataChange--')
    },
    handledit() {
      this.$emit('emitauthrightModel', false)
    },
    //数据范围
    handlerange(row, scope) {
      console.log(row, scope.$index, '打开弹窗前--')
      this.$refs.DataRange.handleAdd(row)
      this.index = scope.$index
    },
    getlist(id) {
      getRoleFunctionAuthority({ roleId: this.id, label: id }).then(response => {
        console.log(response.data, '------')
        this.tableData = response.data
        this.tableDataChange = this.handleTree(JSON.parse(JSON.stringify(this.tableData)), 'menuId', 'parentId')
        console.log(this.tableDataChange, '090909')
      })
    },
    handleTreeToList(list) {
      let arr = [];
      list.map(match => {
        if (match.children && match.children.length > 0) {
          let checked = false;
          match.children.map(mat => {
            if(mat.checked){
              checked = true
            }
            if (mat.children && mat.children.length > 0) {
              let ched = false;
              arr.push(mat)
              mat.children.map(ma => {
                if(ma.checked){
                  ched = true
                }
                arr.push(ma)
              })
              if(ched){
                mat.checked = true
              }else{
                mat.checked = false
              }
            } else {
              arr.push(mat)
            }
          })
          if(checked){
            match.checked = true
          }else{
            match.checked = false
          }
        }
      })
      return [...list, ...arr]
    },
    //保存
    async handleSave(type) {
      if (type == '0') {//取消
        this.tableDataChange = this.tableData
        this.$emit('emitauthrightModel', true)
      } else {
        let newdata = JSON.parse(JSON.stringify(this.tableData))
        if (newdata.length == 0) return this.$message.error('数据错误')
        let arr = this.handleTreeToList(this.tableDataChange)
        console.log(newdata, '报村--', this.handleTreeToList(this.tableDataChange));
        const { data } = await getRoleDataScope({ roleId: this.id, roleMenuList: arr })
        this.$message.success('保存成功')
        this.tableData = []
        if (this.activeName == '1') {
          this.getlist(1)
        } else {
          this.getlist(2)
        }
        // this.handledit()
        this.$emit('emitauthrightModel', true)
      }
    }
  },
  created() { }
};
</script>
<style scoped></style>